<template>
    <view
        class="wkea-nav-content"
        :class="{ sticky: props.sticky }"
        :style="{ background: props.background }"
    >
        <lcw-status-bar :background="props.background"></lcw-status-bar>
        <view
            class="wkea-nav-bar"
            :style="{
                height: navigation,
                color: props.color
            }"
        >
            <view class="left-box" @tap="leftboxEvent">
                <slot name="left">
                    <view
                        class="iconfont icon-xiangzuo"
                        :style="{ color: props.iconColor }"
                    >
                        <uni-icons type="back" size="28"></uni-icons>
                    </view>
                </slot>
            </view>
            <view class="center-box"><slot></slot></view>
            <view class="right-box"><slot name="right"></slot></view>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';

const emit = defineEmits(['back']);

const props = defineProps({
    sticky: {
        type: Boolean,
        default: true
    },
    background: {
        type: String,
        default: '#fff'
    },
    color: {
        type: String,
        default: '#333'
    },
    iconColor: {
        type: String,
        default: '#333'
    },
    back: {
        type: Function,
        default: null
    }
});

// 返回
function leftboxEvent() {
    // 是否自定义返回操作
    if (props.back) {
        emit('back');
        return props.back();
    }
    // 默认返回上一层页面
    uni.navigateBack();
}

// 默认44px
const navigation = ref('44px');

//  #ifdef MP-WEIXIN
function wxCalculate() {
    // 获取胶囊信息
    let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
    // 动态设置导航栏的高度
    navigation.value = menuButtonInfo.height + 'px';
}
wxCalculate();
//  #endif
</script>

<style lang="scss">
.wkea-nav-content {
    width: 100vw;
    z-index: 9;
    /* #ifdef MP-WEIXIN */
    padding-bottom: 20rpx;
    /* #endif */
}

.wkea-nav-bar {
    height: 44px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    position: relative;

    color: #333333;

    > view {
        box-sizing: border-box;
    }

    .left-box {
        padding: 0 40rpx;

        > .iconfont {
            font-size: 34rpx;
        }
    }

    .center-box {
        font-size: 34rpx;
        font-weight: bold;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

.sticky {
    position: sticky;
    top: 0;
}
</style>
